﻿@page "/pages/authentication/Login-v2"
@layout EmptyLayout
@inherits ComponentBase

<MRow Class="max-height ma-0">
    <MCol Md=4 Sm=12 Class="neutral-lighten-5">
        <image class="ml-12 mt-12" style="height:40px;" src="https://cdn.masastack.com/stack/images/logo/MASAStack/logo-h-en.png?x-oss-process=image/resize,w_200"></image>
        <div class="d-flex pb-12" style="height: calc(100% - 88px);">
            <div style="width:450px;" class="ma-auto">
                <h3 class="neutral-lighten-1--text">让变化更简单</h3>
                <div class="mt-12 neutral-lighten-1--text">
                    让变化更简单，让视觉更美好，让体验更丰富，欢迎来到MASA产品系列。
                </div>
                <image class="mt-12" src="/img/login/left.svg"></image>
            </div>
        </div>
    </MCol>
    <MCol Md=8 Sm=12 Class="fill-lighten-1 block-center">
        <MCard Width=510 Height=680 Class="mx-auto my-auto" @onkeydown="KeyHandler">
            <div style="height:60px;"></div>
            <div class="mt-2 mx-auto text-center" style="width:420px;">
                <MAvatar Size=80>
                    <MImage Src="/img/avatar/1.svg">
                    </MImage>
                </MAvatar>
                <h5 class="mt-2 mb-12">Welcome to Masa.Framework.Admin! 👋</h5>

                <MTextField TValue="string"
                            Rules="_requiredRules"
                            @bind-Value="_account"
                            Label="Account"
                            Placeholder="Account"
                            Outlined
                            HideDetails="@("auto")"
                            Autofocus>
                </MTextField>
                <MTextField TValue="string"
                            @bind-Value="_password"
                            Rules="_requiredRules"
                            Class="mt-10"
                            Label="Password"
                            Type="@(_show ? "text" : "password")"
                            Placeholder="Password"
                            AppendIcon="@(_show ? "mdi-eye" : "mdi-eye-off")"
                            OnAppendClick="()=>_show = !_show"
                            Outlined
                            HideDetails="@("auto")">
                </MTextField>
                <span class="d-flex justify-end mt-1 text-caption hover-pointer">
                    Forgot Password?
                </span>
                <MButton Class="mt-11 rounded-4 text-btn white--text" Loading="_loading" Disabled="_loading" OnClick="LoginAsync" Height=46 Width=340 Color="primary">Login</MButton>

                <div class="my-6">
                </div>
                <div class="d-flex block-center">
                    <div style="height:0.5px;width:152px;" class="neutral-lighten-5"></div>
                    <span class="text-caption mx-4">or login with</span>
                    <div style="height:0.5px;width:152px;" class="neutral-lighten-5"></div>
                </div>
                <div class="mt-4">
                    <MIcon Size=24 Color="neutral-lighten-2" OnClick="()=>{}">fab fa-codepen</MIcon>
                    <MIcon Size=24 Color="neutral-lighten-2" Class="ml-6" OnClick="()=>{}">fab fa-github</MIcon>
                    <MIcon Size=24 Color="neutral-lighten-2" Class="ml-6" OnClick="()=>{}">fab fa-twitter</MIcon>
                    <MIcon Size=24 Color="neutral-lighten-2" Class="ml-6" OnClick="()=>{}">fab fa-instagram</MIcon>
                </div>
            </div>
        </MCard>
    </MCol>
</MRow>

<a href="https://beian.miit.gov.cn/" target="_blank" class="neutral-lighten-3--text" style="position:absolute;bottom:48px;margin-left:63%;text-decoration:none;font-size:14px;">浙ICP备2021013592号-1</a>

<MSnackbar Top @bind-Value="_showErrorMessage" Timeout="2000">
    <ChildContent>
        @_errorMessage
    </ChildContent>
</MSnackbar>
